<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-input v-model="value1" placeholder="请输入内容" />
      </view>
    </view>
    
    <!-- 禁用状态 -->
    <view class="demo-block">
      <view class="demo-block__title">禁用状态</view>
      <view class="demo-block__content">
        <fu-input v-model="value2" disabled placeholder="禁用状态" />
      </view>
    </view>
    
    <!-- 可清空 -->
    <view class="demo-block">
      <view class="demo-block__title">可清空</view>
      <view class="demo-block__content">
        <fu-input v-model="value3" clearable placeholder="输入后可清空" />
      </view>
    </view>
    
    <!-- 带图标 -->
    <view class="demo-block">
      <view class="demo-block__title">带图标</view>
      <view class="demo-block__content">
        <fu-input
          v-model="value4"
          prefix-icon="fu-icon-search"
          placeholder="带前缀图标"
        />
        <fu-input
          v-model="value5"
          suffix-icon="fu-icon-calendar"
          placeholder="带后缀图标"
        />
      </view>
    </view>
    
    <!-- 使用插槽 -->
    <view class="demo-block">
      <view class="demo-block__title">使用插槽</view>
      <view class="demo-block__content">
        <!-- 前缀后缀插槽 -->
        <fu-input v-model="value7" placeholder="自定义前缀后缀">
          <template #prefix>
            <text class="demo-slot-text">￥</text>
          </template>
          <template #suffix>
            <text class="demo-slot-text">元</text>
          </template>
        </fu-input>
        
        <!-- 前置后置插槽 -->
        <fu-input v-model="value8" placeholder="自定义前置后置内容">
          <template #prepend>
            <text class="demo-slot-text">https://</text>
          </template>
          <template #append>
            <text class="demo-slot-text">.com</text>
          </template>
        </fu-input>
      </view>
    </view>
    
    <!-- 密码输入 -->
    <view class="demo-block">
      <view class="demo-block__title">密码输入</view>
      <view class="demo-block__content">
        <fu-input
          v-model="value6"
          type="password"
          placeholder="请输入密码"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    .fu-input {
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.demo-slot-text {
  font-size: var(--fu-font-size-base);
  color: var(--fu-text-color-secondary);
}
</style> 